<template>
  <view class="detail-page">
    <!-- 头部导航 -->
    <!-- <view class="header">
      <view class="back-btn" @click="goBack">
        <text class="back-icon">‹</text>
      </view>
      <text class="title">优惠券详情</text>
    </view> -->
    <CustomNavBar :title="pageTitle" />
    <!-- 优惠券详情卡片 -->
    <view class="detail-card">
      <!-- 金额显示 -->
      <view class="amount-section">
        <view class="amount-display">
          <text class="currency">¥</text>
          <text class="value2">{{ couponData.value }}.00</text>
        </view>
        <view class="coupon-desc">
          <text class="desc-text">{{ couponData.type }}剩余额度</text>
        </view>
        <!-- 汽车背景图 -->
        <!-- <view class="car-bg"></view> -->
      </view>

      <!-- 优惠券信息 -->
      <view class="coupon-info">
<!--        <view class="info-row">-->
<!--          <text class="label">{{ couponData.code || '皖A00000' }}</text>-->
<!--        </view>-->

        <view class="info-row">
          <text class="label">优惠券类别</text>
          <text class="value">{{ couponData.type }}</text>
        </view>

        <view class="info-row">
          <text class="label">优惠券金额</text>
          <text class="value">¥{{ couponData.threshold }}</text>
        </view>

        <view class="info-row">
          <text class="label">优惠券剩余</text>
          <text class="value">¥{{ couponData.value }}</text>
        </view>

        <view class="info-row">
          <text class="label">获取方式</text>
          <text class="value">{{ couponData.source || '加入共享充电桩礼赠券' }}</text>
        </view>

        <view class="info-row">
          <text class="label">适用范围</text>
          <text class="value">{{ couponData.scope }}</text>
        </view>

        <view class="info-row">
          <text class="label">领取日期</text>
          <text class="value">{{ couponData.receiveDate || '2025-08-10' }}</text>
        </view>

        <view class="info-row">
          <text class="label">到期日期</text>
          <text class="value">{{ couponData.expiry }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavBar from '@/components/CustomNavBar.vue'

// 优惠券类型
const couponType = ref('')

// 优惠券数据
const couponData = ref({
        type: '洗车券',
        value: 100,
        threshold: 1000,
        scope: '与听鸽合作商户',
        expiry: '2025-10-31',
        code: '皖A00000',
        source: '加入共享充电桩礼赠券',
        receiveDate: '2025-08-10'
      })

// 计算标题
const pageTitle = computed(() => {
  return couponType.value = couponType.value
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载时获取传递的数据
onLoad((options) => {
  if (options.type) {
    couponType.value = options.type
    couponData.value.type = options.type
  }
})
</script>

<style scoped>
.detail-page {
  min-height: 100vh;
  background-color: #fff;
}

.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
}

.title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin-right: 60rpx;
}

.detail-card {
  /* margin: 30rpx; */
  background-color: #fff;
  /* border-radius: 20rpx; */
  overflow: hidden;
  /* box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); */
}

.amount-section {
  /* position: relative; */
  padding: 100rpx 40rpx;
  background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/bg_car5.png');
  background-size: 100%;
  background-position: bottom;
  background-repeat: no-repeat;
  /* text-align: center;
  overflow: hidden; */
}

.amount-display {
  /* display: flex; */
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20rpx;
  text-align: center;
}

.currency {
  font-size: 36rpx;
  color: #333;
  margin-right: 10rpx;
}

.value2 {
   font-size: 80rpx;
  /* font-weight: bold; */
  color: #333;
}
.value {
  font-size: 80rpx;
  /* font-weight: bold; */
  color: #333;
}

.coupon-desc {
  margin-bottom: 20rpx;
  text-align: center;
}

.desc-text {
  font-size: 28rpx;
  color: #666;
}

.car-bg {
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
  width: 120rpx;
  height: 60rpx;
  background-image: url('https://tg-spcs.oss-cn-hangzhou.aliyuncs.com/static/images/activity_pile/car.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom;
  height: 200rpx;
  width: 200rpx;
  /* opacity: 0.3; */
}

.coupon-info {
  padding: 40rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-row:last-child {
  border-bottom: 1rpx solid #f0f0f0;
}

/*.info-row:first-child {*/
/*  justify-content: center;*/
/*  font-weight: bold;*/
/*  font-size: 32rpx;*/
/*  color: #333;*/
/*  !* border-bottom: 2rpx solid #00D4AA; *!*/
/*  margin-bottom: 20rpx;*/
/*}*/

.info-row:first-child .label {
  color: #333;
  font-size: 32rpx;
}

.label {
  font-size: 30rpx;
  color: #666;
  flex: 1;
}

.value {
  font-size: 30rpx;
  color: #333;
  text-align: right;
  flex: 1;
}
</style>
